<template>
  <van-list>
    <van-cell v-for="(item, index) in songs" :key="item.id" @click="handleItemClick(index)">
      <template #icon>
        <img v-if="layout == '0'" v-lazy="item.picUrl" />
        <span class="index" v-else>{{ index + 1 }}</span>
      </template>
      <template #title>
        <span class="title">{{ item.name }}</span>
      </template>
      <template #label>
        <span>{{ item.author }}</span>
      </template>
      <template #right-icon>
        <span v-if="layout != '0'">
          <van-icon
            v-if="audioPlayState && currentPlaySong.id == item.id"
            class-prefix="my-icon"
            name="play"
            size="19"
          />
          <van-icon
            v-if="!audioPlayState && currentPlaySong.id == item.id"
            class-prefix="my-icon"
            name="timeout"
            size="19"
          />
        </span>
        <span>
          <van-icon v-if="layout == '0'" name="ellipsis" @click.stop="handleActionSheet(index)" />
          <van-icon v-else name="cross" @click.stop="handleActionDel(index)" />
        </span>
      </template>
    </van-cell>
  </van-list>
</template>

<script lang="ts" setup>
import { PropType } from 'vue';
import { useMyStores } from '@/store';

const { audioPlayState, currentPlaySong } = useMyStores();

defineProps({
  songs: {
    type: Array as PropType<any[]>,
    default: []
  },
  layout: {
    type: [String, Number],
    default: 0
  }
});

const emit = defineEmits(['handleItemClick', 'handleActionSheet', 'handleActionDel']);
const handleItemClick = (index: any) => {
  emit('handleItemClick', index);
};
const handleActionSheet = (index: any) => {
  emit('handleActionSheet', index);
};
const handleActionDel = (index: any) => {
  emit('handleActionDel', index);
};
</script>

<style lang="less" scoped>
img {
  width: 50px;
  height: 50px;
  border-radius: 5px;
  margin-right: 10px;
}
.index {
  display: inline-block;
  width: 30px;
  text-align: center;
}
.title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.my-icon {
  margin-right: 10px;
  color: #ec4141;
}
.van-icon-ellipsis {
  transform: rotateZ(90deg);
}
</style>
